<template>
  <div class="project">
    <div class="v-title">
      <span>商品列表</span>
      <a slot="extra" @click="publish">发布商品</a>
    </div>

    <a-card
      style="margin-top: 16px; border-radius: 6px;"
      :body-style="{ padding: '24px' }"
    >
      <div class="status-list">
        <div
          class="status-item"
          @click="selectStatus(item)"
          :class="{ active: item.value == query.status }"
          v-for="item in statusOptions"
          :key="item.value"
        >
          <a-badge :count="item.count" :overflow-count="999" />
          <span>{{ item.name }}</span>
        </div>
      </div>
    </a-card>

    <a-table
      style="margin-top: 16px;"
      :columns="columns"
      :bordered="false"
      :data-source="list"
      :pagination="pagination"
      rowKey="ID"
      :loading="loading"
    >
      <div slot="index" slot-scope="text, record, index">
        {{ index + 1 }}
      </div>
      <div slot="CreatedAt" slot-scope="text">
        {{ format(text) }}
      </div>

      <div slot="cWork" slot-scope="text, record">
        {{ record.c_work_info.name }}
      </div>

      <div slot="cProduct" slot-scope="text, record">
        {{ record.c_product_info.name }}
      </div>

      <div slot="top" slot-scope="text, record">
        <a-checkbox @change="handleTopChange(record)" :checked="record.top" />
      </div>

      <div slot="status" slot-scope="text">
        {{ text | status }}
      </div>

      <div slot="action" slot-scope="text, record">
        <a style="margin-left: 12px;" @click="edit(record)">
          查看
        </a>

        <a-popconfirm
          title="确定删除商品吗？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteGoods(record)"
        >
          <a style="margin-left: 12px;">
            删除
          </a>
        </a-popconfirm>
      </div>
    </a-table>
  </div>
</template>

<script>
import dayjs from "dayjs";
import storage from "@/utils/storage";
import { getGoods, updateGoods, deleteGoods } from "@/api/account";
import { mapGetters } from "vuex";
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    scopedSlots: { customRender: "index" }
  },
  {
    title: "行业",
    dataIndex: "cWork",
    scopedSlots: { customRender: "cWork" },
    align: "center"
  },
  {
    title: "品类名",
    dataIndex: "cProduct",
    scopedSlots: { customRender: "cProduct" },
    align: "center"
  },
  {
    title: "商品标题",
    dataIndex: "title",
    scopedSlots: { customRender: "title" },
    align: "center"
  },
  {
    title: "发布时间",
    dataIndex: "CreatedAt",
    scopedSlots: { customRender: "CreatedAt" },
    align: "center"
  },
  {
    title: "审核状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" },
    align: "center"
  },
  {
    title: "置顶",
    dataIndex: "top",
    scopedSlots: { customRender: "top" },
    align: "center"
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    align: "center"
  }
];
export default {
  data() {
    return {
      columns,
      list: [],
      statusOptions: [
        {
          name: "全部",
          value: undefined,
          count: 8
        },
        {
          name: "待审核",
          count: 8,
          value: 1
        },
        {
          name: "审核驳回",
          count: 8,
          value: 2
        },
        {
          name: "审核通过",
          count: 8,
          value: 3
        }
      ],
      pagination: {
        total: 0,
        showTotal: total => `共${total}条`,
        pageSize: 20,
        onChange: page => {
          this.query.page = page;
        }
      },
      loading: false,
      query: {
        userId: undefined,
        cWork: undefined,
        cProduct: undefined,
        status: undefined
      }
    };
  },
  computed: {
    ...mapGetters(["account"]),
    currentProduct() {
      let current = [];
      for (const item of this.config.c_types) {
        if (this.query.cWork == item.ID) {
          current = item.c_types;
        }
      }

      return current;
    }
    // statusOptions() {
    //   console.log(this);
    //   return [
    //     {
    //       name: "全部",
    //       value: undefined,
    //       count: 8
    //     },
    //     {
    //       name: "待审核",
    //       count: 8,
    //       value: 1
    //     },
    //     {
    //       name: "审核驳回",
    //       count: 8,
    //       value: 2
    //     },
    //     {
    //       name: "审核通过",
    //       count: 8,
    //       value: 3
    //     }
    //   ];
    // }
  },
  mounted() {
    this.query.userId = this.account.ID;
    this.getGoods();
  },
  filters: {
    status(val) {
      const map = {
        0: "待审核",
        1: "待审核",
        2: "审核驳回",
        3: "审核通过"
      };

      return map[val];
    }
  },
  methods: {
    selectStatus(item) {
      this.query.status = item.value;
      this.getGoods();
    },
    async getGoods() {
      this.loading = true;
      const res = await getGoods(this.query);
      this.loading = false;
      this.list = res.data.list;
      this.statusOptions[0].count =
        res.data.dsh + res.data.shbh + res.data.shtg;
      this.statusOptions[1].count = res.data.dsh;
      this.statusOptions[2].count = res.data.shbh;
      this.statusOptions[3].count = res.data.shtg;
      console.log(this.statusOptions);
    },
    format(time) {
      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
    },
    edit(item) {
      storage.setItem("GOODS_ITEM", item);
      this.$router.push({
        path: "/user-center/goods-edit",
        query: {
          id: item.ID
        }
      });
    },
    publish() {
      if (this.account.applyStatus != 3) {
        this.$message.info("请先认证企业会员");
        return;
      }

      this.$router.push({
        path: "/user-center/goods-edit"
      });
    },
    async handleTopChange(item) {
      console.log(item.top);
      if (item.top) {
        item.top = false;
      } else {
        item.top = true;
      }
      await updateGoods(item);
      this.getGoods();
    },
    async deleteGoods(item) {
      await deleteGoods(item);
      this.getGoods();
      this.$message.info("删除成功");
    }
  }
};
</script>

<style lang="less" scoped>
.project {
  background: @white;
  padding: 20px 40px 20px 20px;

  .v-title {
    display: flex;
    justify-content: space-between;

    a {
      font-size: 16px;
    }
  }

  .status-list {
    display: flex;

    .status-item {
      margin-right: 28px;
      border: 1px solid @border-color;
      padding: 5px 18px;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      font-weight: bold;
      color: @text-color-2;

      /deep/.ant-badge {
        position: absolute;
        right: -8px;
        top: -8px;

        .ant-badge-count {
          background: #409eff;
        }
      }

      &.active {
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
      }
    }
  }
}
</style>
